<template>
  <div class="sea-image-picker">
    <div v-show="valueModel" class="sea-image-picker-item" style="padding: 6px;">
      <img :src="valueModel" alt="Image preview" style="width: 84px;height: 84px;display: block;"/>
      <div class="sea-image-picker-remove" title="删除">
        <i class="fa fa-times-circle-o"></i>
      </div>
    </div>
    <div class="sea-image-picker-item" v-show="canUpload">
      <div @click="$refs.input.click()">
        <el-row class="sea-image-picker-button" v-loading="loading">
          <i class="el-icon-plus"></i>
        </el-row>
        <input type="file" ref="input" style="display: none" @change="convertToBase64">
      </div>
    </div>
  </div>
</template>

<script>
import Layers from "@/lang/layers";

/**
 * 图标上传
 *
 * 将图片转换成 base64 之后进行上传
 */
export default {
    props: {
        type: {type: String, default: 'text'}
        // 选中的节点
        , value: {type: String, default: undefined}
    }, model: {
        //需要定义哪一个props可以用v-model绑定属性
        prop: 'value',
        //声明一个事件，调用之后，就会改变父级容器的值
        event: 'handlerValueChange'
    }, computed: {
        canUpload: function () {
            return Layers.isBlank(this.valueModel);
        }
        ,valueModel: {
            get: function () {
                //实际使用的是value值
                return this.value;
            },
            set: function (val) {
                //侦听到setter()事件，将值传递回父级组件
                this.$emit('handlerValueChange', val);
                this.$emit('change', val);
            }
        }
    }, methods: {
        convertToBase64(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.valueModel = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
    },
};
</script>
